<template>
  <div id="home">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-carousel height="600px">
            <el-carousel-item v-for="item in imgPath" :key="item">
              <img :src="item" alt id="lunbo" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-col>
    </el-row>
    <div class="container">
      <div class="wenzi animate__animated animate__bounceInDown" style="--animate-duration:2s">
        <p>
          食界
          <br />食幸福，享生活
        </p>
      </div>
      <TodayRecommend></TodayRecommend>
      <IndexFood></IndexFood>
      <Content></Content>
      <div class="bigPic">
        <img src="../assets/bindex.jpg" alt />
      </div>
      <UserAll></UserAll>
    </div>
  </div>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.8/vue.js"></script>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import TodayRecommend from "../components/index/TodayRecommend";
import IndexFood from "../components/index/IndexFood";
import Content from "../components/index/Content";
import UserAll from "../components/index/UserAll";
export default {
  data() {
    return {
      imgPath: [
        require("../assets/banner20.jpg"),
        require("../assets/banner21.jpg"),
        require("../assets/banner22.jpg"),
        require("../assets/banner23.jpg")
      ],
      height: "",
      offsetWidth: ""
    };
  },
  components: {
    TodayRecommend,
    IndexFood,
    Content,
    UserAll
    // BackTop
  },
  methods: {}
};
</script>
<style lang="css" scoped>
.wenzi{
  z-index: 100;
  position: absolute;
  top: 6%;
  left: 16%;
}
.wenzi p{
  font-size: 50px;
  color: #fff;
  line-height: 80px;
}
li {
  list-style: none;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 48px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

#home {
  position: relative;
  margin-top: 61px;
}
#lunbo {
  height: 700px;
  width: 100%;
}
.container {
  margin-top: 30px;
  /* position: relative; */
}

h2 {
  font-size: 20px;
  color: #e6a23c;
  font-weight: 700;
  line-height: 48px;
  margin-left: 15px;
}

.bigPic {
  text-align: center;
  margin-top: 345px;
}
.bigPic img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.index_search {
  z-index: 100;
  position: relative;
  border-radius: 5px;
  background-color: rgba(225, 225, 225, 0.6);
  height: 150px;
  width: 80%;
  left: 10%;
  margin-top: -125px;
  box-shadow: 5px 5px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
